<template>
	<up-popup
		:show="show"
		closeable
		:zIndex="900"
		mode="center"
		bgColor="transparent"
		@close="close">
		<view class="product">
			<view class="product-title">选择销售人员</view>
			<view class="product-content">
				<!--查询-->
				<view class="search-form main-flex" id="search">
					<uni-forms ref="searchRef" :modelValue="searchModel" label-width="80px" label-align="right">
						<view class="search-form-list main-flex">
							<uni-forms-item label="销售姓名">
								<uni-easyinput v-model="searchModel.name" placeholder="请输入销售姓名" />
							</uni-forms-item>
							<uni-forms-item label="销售电话">
								<uni-easyinput v-model="searchModel.phone" placeholder="请输入销售电话" />
							</uni-forms-item>
							<uni-forms-item label="推荐码">
								<uni-easyinput v-model="searchModel.recommendCode" placeholder="请输入推荐码" />
							</uni-forms-item>
							<uni-forms-item>
								<view class="main-flex">
									<up-button
										class="search-form-btn"
										text="搜索"
										type="primary"
										@click="searchSubmit"
										icon="search"></up-button>
									<up-button
										class="search-form-btn"
										@click="resetSubmit"
										text="重置"></up-button>
								</view>
							</uni-forms-item>
						</view>
					</uni-forms>
				</view>
				<scroll-view scroll-y class="product-box">
					<view class="table">
						<ty-table
							:data="tableList"
							:showHeader="false"
							:columns="columns"
							:sortable="true"
							:cellClassName="() => 'table-cell'"
							:headerCellClassName="() => 'table-cell'"
							:rowClassName="() => 'table-row'"
							stripe
							border>
							<template v-slot:operate="{ row }">
								<uni-tag @click="change(row)" type="primary" size="small" text="选择" />
							</template>
							<template v-slot:empty>
								<view class="table-empty">
									<up-empty v-if="isNull" mode="data"/>
								</view>
							</template>
						</ty-table>
					</view>
					<view class="product-more main-flex" v-if="!isNull">
						<uni-load-more :status="status" />
					</view>
				</scroll-view>
			</view>
		</view>
	</up-popup>
</template>

<script>
import { salesman } from "@/api/app_api/user"
	export default {
		name: 'tySalesman',
    emits: ['close', 'change'],
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tableList: [],
				columns: [
					{ title: '销售人员', key: 'name', align: 'center' },
					{ title: '联系电话', key: 'phone', align: 'center' },
					{ title: '推荐码', key: 'recommendCode', align: 'center' },
					{ title: '操作', key: 'operate', align: 'center' }
				],
				searchModel: {
					recommendCode: '',
					name: '',
					phone: ''
				},
				pageNum: 1,
				pageSize: 10,
				total: 0,
				isLoading: false,
				status: 'loading',
				isNull: false
			}
		},
    computed:{
      
    },
		watch: {
			show: {
				immediate: true,
				handler(val, old) {
					if (val) {
						this.resetSubmit()
					}
				}
			}
		},
		created() {
			
		},
    methods: {
			close() {
				this.$emit('close')
			},
			change(item) {
				this.$emit('change', item)
			},
			searchSubmit() {
				this.pageNum = 1
				this.tableList = []
				this.searchFirst()
			},
			resetSubmit() {
				this.searchModel = {
					recommendCode: '',
					name: '',
					phone: ''
				}
				this.searchFirst()
			},
			searchFirst() {
				this.pageNum = 1
				this.tableList = []
				this.getList()
			},
			pageChange(page) {
				this.pageNum = page
				this.getList()
			},
			sizeChange(size) {
				this.pageSize = size
				this.getList()
			},
			scrolltolower() {
				if(this.status == 'no-more') return false;
				this.pageNum += 1
				this.status = 'loading'
				this.getList()
			},
			getList() {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				if (this.searchModel.name) {
					params.name = this.searchModel.name
				}
				if (this.searchModel.name) {
					params.name = this.searchModel.name
				}
				if (this.searchModel.name) {
					params.name = this.searchModel.name
				}
				this.isLoading = true
				// uni.showLoading({
				// 	title: '数据加载中...'
				// })
				salesman(params).then(res => {
					this.status = res.data.length === this.pageSize ? 'loading' : 'no-more'
					this.total = res.allNumber
					this.isNull = res.allNumber === 0 && this.pageNum === 1
					this.isLoading = false
					// uni.hideLoading()
				}).catch(() => {
					this.isLoading = false
					// uni.hideLoading()
				})
			}
		}
	}
</script>
<style lang="scss" >
	.search-form {
		background-color: #fff;
		box-sizing: border-box;
		&-btn {
			width: 100px !important;
		}
		&-list {
			flex-wrap: wrap;
		}
	}
	.product {
		width: 940px;
		border-radius: 10px;
		background-color: #ffffff;
		&-title {
			line-height: 48px;
			text-align: center;
			font-weight: 600;
			font-size: 20px;
		}
		&-content {
			padding: 20px;
		}
		&-box {
			max-height: 60vh;
			margin-top: 20px;
		}
		&-more {
			width: 100%;
			justify-content: center;
		}
	}
</style>
